<template>
	<view class="playList flex flex--row">
	<!-- 	<navBar></navBar> -->
		<view class="playListHead flex flex--align-items--center">
			<block v-for="(item, index) in playList" :key="item.id">
				<view
					class="playListHeadItem"
					:class="{ 'active': playIndex === index }"
					@click="playIndex = index"
				>
				<image v-show="item.images[0].imgLoaded" lazy-load :src="item.images[0].url" mode="aspectFill" class="pwHeadImg"
					@load="changeHeadImg(index)"></image>
				<image v-show="!item.images[0].imgLoaded" src="../../static/image/loading.gif"
					mode="aspectFill" class="pwHeadImg"></image>
			
				</view>
			</block>
		</view>
		
		<view class="swiper">
			<swiper class="content" :circular="true">
				<swiper-item v-for="(item, index) in playList[playIndex].images" :key="index">
					<image  v-show="item.imgLoaded" :src="item.url" mode="aspectFill" @load="imgDetailShow(index)" />
					<image  v-show="!item.imgLoaded" src="../../static/image/loading.gif" mode="aspectFill" />
						</swiper-item>
			</swiper>
			<view class="playInfo">
				<view class="playInfoTitle">{{ playList[playIndex].nickname }}</view>
				<view class="playInfoDesc">
					{{ playList[playIndex].height + 'cm' }}
					/
					{{ playList[playIndex].weight + 'kg' }}
					/
					{{ playList[playIndex].conste }}
				</view>
				<view class="playInfoCity">
					<text v-if="playList[playIndex].province">{{ playList[playIndex].province }}</text><text v-if="playList[playIndex].city"> · {{ playList[playIndex].city }}</text> 
				</view>
				<view class="desc">
					<view v-if="playList[playIndex].intro" >{{playList[playIndex].intro}}</view >
					<view v-if="playList[playIndex].details" >{{playList[playIndex].details}}</view >
				</view>	
			</view>
		</view>
		
		<view class="playBtn" @click="returnPage">立即下单</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				playList: [],
				playIndex: 0,
				playTypeId:null,
				pwType:null
			}
		},
		onLoad(opt) {
			console.log(opt)
			if(opt.type){
				this.pwType=opt.type
			}
			this.getPlayList()
			if(opt.playTypeId){
				console.log("当前已选择陪玩项目id为:"+opt.playTypeId)
				this.playTypeId=opt.playTypeId
			}
		},
		computed: {
			...mapState(['baseUrl'])
		},
		methods: {
			imgDetailShow(index){
				this.playList[this.playIndex].images[index].imgLoaded=true
			},
			//头部图片加载好了
			changeHeadImg(index){
				this.playList[index].images[0].imgLoaded=true
			},
			async getPlayList() {
				var that=this
				const { data } = await this.$http('/appapi/play_with/lists',{
					label_id:this.pwType
				})
				data.forEach((v) => {
					let result
					if(that.playList.length<=0){
						  result= v.images.map(url => ({ url, imgLoaded: false }));
					}else{
						 result= v.images.map(url => ({ url, imgLoaded: true }));
					}
					 v.images=result
				 })
				this.playList = data
			},
			returnPage() {
				//专项点人
				uni.setStorageSync("playUser", this.playList[this.playIndex])
				
				if(this.playTypeId){
					uni.navigateTo({
						url: "/pages/index/index?playTypeId="+this.playTypeId
					})
				}else{
					uni.navigateTo({
						url: "/pages/index/index"
					})
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.desc{
		padding: 10px;
		background: rgba(0,0,0,0.3);
		color:#fff;
	}
	.playList {
		height: 100%;
		.playListHead {
			overflow-x: scroll;
			.playListHeadItem {
				flex-shrink: 0;
				width: 135rpx;
				height: 135rpx;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
					vertical-align: middle;
				}
				&:last-of-type {
					margin-right: 0;
				}
				&.active {
					position: relative;
					&::after {
						content: '';
						width: 115rpx;
						height: 115rpx;
						border: 10rpx solid #FA97B4;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
		}
		.swiper {
			flex: 1;
			// background: #ff0;
			margin-top: 20rpx;
			position: relative;
			.content {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
					vertical-align: middle;
				}
			}
			.playInfo {
				position: absolute;
				top: 100rpx;
				left: 60rpx;
				.playInfoTitle {
					display: inline-block;
					padding: 10rpx 20rpx;
					background: #000;
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
				}
				.playInfoDesc {
					font-size: 28rpx;
					color: #fff;
					margin-top: 30rpx;
				}
				.playInfoCity {
					font-size: 28rpx;
					color: #fff;
					margin-top: 20rpx;
					text {
						color: #FA97B4;
					}
				}
			}
		}
		.playBtn {
			width: 280rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #FA97B4;
			border-radius: 10rpx;
			position: fixed;
			left: 50%;
			margin-left: -140rpx;
			bottom: 100rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
</style>
